<template>
  <section>
    <h3>内容推荐</h3>

    <el-col :span="24">
      <ul>
        <li v-for="item in list" @click="detail(item)">
          <h4>标题:{{item.title}}</h4>
          <p>介绍:{{item.desc}}</p>
          <div>
            <span v-if="item.type">类型:{{item.type}}</span>
            <span v-if="item.tag">标签: {{item.tag}}</span>
            <span>发送时间：{{item.created_at}}</span>
          </div>
        </li>
      </ul>
    </el-col>

  </section>
</template>
<script>
  /* eslint-disable indent,space-before-function-paren,spaced-comment */
  import { getArticleList } from '../../public/api'
  import Bus from '../../bus/bus'

  export default {
    data () {
      return {
        filter: {
          key: ''
        },
        list: [],
        total: 0,
        size: 7,
        dialogVisible: false,
        current: {},
        currentPage: 0
      }
    },
    methods: {
      Init (isLoadMore = false, page = 1) {
        getArticleList({
          page: page,
          size: this.size
        }).then(data => {
            if (data.status) {
              if (!isLoadMore) this.list.length = 0
              this.list = this.list.concat(data.data)
              this.total = data.total
            } else {
              this.$message.error(data.msg)
            }
          }
        ).catch(data => {})
      },
      loadMore () {
        if (this.size * this.currentPage >= this.total) {
          console.log('没有啦')
        } else {
          console.log('加载更多')
          this.currentPage++
          this.Init(true, this.currentPage)
        }
      },
      detail (a) {
        console.log(a)
        this.current = a
        // this.dialogVisible = true
        this.$router.push({name: 'article', params: {id: a.id}})
      }
    },
    mounted () {
      this.Init()
      Bus.$on('loadMore', () => {
        this.loadMore()
      })
    },
    beforeDestroy () {
      Bus.$off('loadMore')
    }
  }
</script>
<style scoped>
  ul li {
    /*border: 1px solid black;*/
    background: #fff;
    width: 600px;
    margin: 20px auto;
    border-radius: 5px;
  }

  ul li:hover {
    cursor: pointer;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
  }

  ul li div, ul li p {
    text-align: left;
  }

  ul li p {
    text-indent: 2em;
  }

  ul li div span {
    margin-left: 40px;
    line-height: 2em;
    font-size: 0.8em;
  }

  ul li div {
    text-align: right;
    padding-right: 10px;
  }
</style>
